<script setup>
// 直接在 defineProps 中定义属性和默认值（无需 withDefaults）
const props = defineProps({
    // 输入框类型（text、number等）
    type: {
        type: String,
        default: 'text' // 直接在这里设置默认值
    },
    // 对齐方式
    align: {
        type: String,
        default: 'left'
    },
    // 标签是否可见
    labelVisible: {
        type: Boolean,
        default: true
    },
    // 是否必填
    required: {
        type: Boolean,
        default: false
    },
    // 标签文本
    label: {
        type: String,
        default: ''
    },
    // 标签宽度
    labelWidth: {
        type: String,
        default: ''
    },
    // 占位符
    placeholder: {
        type: String,
        default: ''
    },
    // 是否禁用
    disabled: {
        type: Boolean,
        default: false
    },
    // 是否只读
    readonly: {
        type: Boolean,
        default: false
    }
})

// 双向绑定值
const value = defineModel()
</script>

<template>
    <div :class="['flex', align === 'top' ? 'flex-col items-stretch' : 'items-center']">
        <div v-if="labelVisible" class="text-sm flex items-center mr-1 font-medium">
            <template v-if="$slots.label">
                <span v-if="required" class="text-red-500 mr-0.5">*</span>
                <slot name="label"></slot>
            </template>
            <div v-else :style="{ width: labelWidth, textAlign: align === 'top' ? 'left' : align }">
                <span v-if="required" class="text-red-500 mr-0.5">*</span>
                <span> {{ label }}</span>
            </div>
        </div>

        <input :type="type" :name="label" v-model="value" :class="[
            'grow h-[32px] rounded-[2px] border-none pl-[12px] pr-[12px] text-sm bg-[#f7f8fa] font-medium ',
            align !== 'top' ? 'ml-2' : 'mt-1.5',
        ]" :placeholder="placeholder || '请输入' + props.label" :disabled="disabled" :readonly="readonly" />
    </div>
</template>

<style scoped>
input::placeholder {
    color: #757575
}

input:focus {
    outline: none;
}

input:focus-visible {
    outline: none;
}

input[disabled] {
    color: #757575
}
</style>